<template>
  <div id="addRole">
    <h3>修改材料</h3>
    <!-- 角色信息 -->
    <Form :model="materialInfo" :rules="materialRule" ref="addForm">
        <FormItem prop="materialName" label="材料名称">
            <Input v-model="materialInfo.materialName"></Input>
        </FormItem>
        <FormItem prop="icon" label="材料图标">
          <!-- 上传图标 -->
          <br/>
          <div class="demo-upload-list" v-if="materialInfo.icon && materialInfo.icon.trim() != 0">
              <template>
                  <img :src="materialInfo.icon">
                  <div class="demo-upload-list-cover">
                      <Icon type="ios-eye-outline" @click.native="handleView()"></Icon>
                      <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                  </div>
              </template>
          </div>
          <Upload
              v-if="!materialInfo.icon && materialInfo.icon.trim() == 0"
              :data="dataObj"
              ref="upload"
              :show-upload-list="false"
              :on-success="handleSuccess"
              :format="['jpg','jpeg','png']"
              :on-format-error="handleFormatError"
              :before-upload="handleBeforeUpload"
              type="drag"
              action="http://laboratory101.oss-cn-hangzhou.aliyuncs.com"
              style="display: inline-block;width:58px;">
              <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
              </div>
          </Upload>
          <Modal title="查看图片" v-model="visible">
              <img :src="materialInfo.icon" v-if="visible" style="width: 100%">
          </Modal>
        </FormItem>
        <FormItem prop="url" label="购买路径">
            <Input v-model="materialInfo.url"></Input>
        </FormItem>
        <FormItem prop="specification" label="材料规格">
            <Input v-model="materialInfo.specification"></Input>
        </FormItem>
        <FormItem prop="type" label="材料类型">
            <Input v-model="materialInfo.type"></Input>
        </FormItem>
        <FormItem prop="status" label="材料状态">
            <i-switch v-model="materialInfo.status" ></i-switch>
        </FormItem>
    </Form>

    <Button type="primary" @click="saveMaterial()">修改</Button>
  </div>
</template>

<script>
import {getUUID} from '@/utils/index.js'
export default {
  data(){
    return{
      materialInfo:{
        materialName:'',
        icon:'',
        url:'',
        specification:'',
        type:'',
        status:false,
      },
      materialRule:{
        materialName:[
          { required: true, message: 'Please fill in the materialName', trigger: 'blur' }
        ],
        url:[
          { required: true, message: 'Please fill in the url', trigger: 'blur' }
        ],
        specification:[
          { required: true, message: 'Please fill in the specification', trigger: 'blur' }
        ],
        type:[
          { required: true, message: 'Please fill in the type', trigger: 'blur' }
        ]
      },
      //1.图片上传所需信息
      dataObj:{
        policy:'',
        signature:'',
        ossaccessKeyId:'',
        key:'',
        dir:'',
        host:''
      },
      //查看图标大图
      visible: false,          
    }
  },
  created(){
    this.materialInfo = this.$route.query.equipmentmsg
  },
  methods:{
    //保存角色设置
    async saveMaterial(){
      this.$refs.addForm.validate(async (valid) => {
        if(valid){
          const {data:res} = await this.$axios.post('/material/edit', this.materialInfo)
          if(res.status == 200){
            this.$Message.info('修改成功');
            this.$router.push('/admin/material')
          }else{
            this.$Message.info('修改失败');
          }
        }
      })      
    },
    //请求后端获取阿里云信息
    async handleBeforeUpload () {
      await this.beforeUpload()
    },
    async beforeUpload(){
      const {data:response} = await this.$axios.post('/oss/policy')
      this.dataObj.policy = response.data.policy;
      this.dataObj.signature = response.data.signature;
      this.dataObj.ossaccessKeyId = response.data.accessid;
      this.dataObj.key = response.data.dir + getUUID() + '_${filename}';
      this.dataObj.dir = response.data.dir;
      this.dataObj.host = response.data.host;  
    },
    handleFormatError (file) {
        this.$Notice.warning({
            title: '文件格式不正确',
            desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
        });
    },
    handleSuccess (res, file) {
        this.materialInfo.icon = this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) 
    },
    handleView () {
        this.visible = true;
    },
    handleRemove () {
      this.materialInfo.icon = ''
    },
  }
}
</script>

<style>
  #addRole{
    margin:0 2vw;
  }
  h3{
    margin:1vh 0;
  }
  .node{
    margin-bottom:12px;
  }
  .children{
    margin-left:18px;
  }
/* 上传图标 */
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .ivu-icon-camera{
      display:inline-block !important;
      height:20px!important;
      width:20px !important;
      color:black !important;
      z-index:1001
    }
</style>